<template>
  <view class="tabs">
    <view
      v-for="(item, index) in tabsData"
      :key="item.id"
      @tap="changeTabs(index)"
      class="tabs_item"
      :class="{
        active: activeIndex === index,
      }"
      >{{ item.text }}</view
    >
  </view>
</template>

<script>
export default {
  // props接受的是父函数  定义的函数名，不是传递过来的函数名
  props: ["tabsData"],
  data() {
    return {
      activeIndex: 0,
    };
  },
  methods: {
    changeTabs(index) {
      // 改变索引让组件自己选中状态跟新：
      this.activeIndex = index;
      // 把当前组件内部每一个item的索引传递给父组件
      this.$emit("sedTabsIndex", index);
    },
  },
};
</script>

<style lang="less" >
.tabs {
  display: flex;
  justify-content: space-evenly;
  //   width: 750rpx;
  //   height: 88rpx;
  .tabs_item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
    color: #6d6d6d;
    width: 184rpx;
    height: 88rpx;
    border-bottom: 3rpx solid transparent;
    &.active {
      font-weight: bold;
      color: #000;
      border-bottom-color: #eb4450;
    }
  }
}
</style>